<!--
 * @Descripttion:
 * @version:
 * @Author: zhangfan
 * @email: 2207044692@qq.com
 * @Date: 2020-06-02 09:21:14
 * @LastEditors: zhangfan
 * @LastEditTime: 2020-08-27 13:54:26
-->
<template>
  <el-row class="operateList">
    <el-radio-group
      v-model="tabPosition"
      @change="tabChange"
      class="tabsContainer"
    >
      <el-radio-button
        v-for="(item, index) of groupList"
        :label="index"
        :key="index"
        >{{ item.name }}</el-radio-button
      >
    </el-radio-group>
  </el-row>
</template>
<script>
export default {
  data() {
    return {
      tabPosition: '',
    }
  },
  props: {
    groupList: {
      type: Array,
    },
    tabIndex: {
      type: String,
      default: '',
    },
  },
  created() {
    this.tabPosition = 0
  },
  watch: {
    tabIndex() {
      console.log(this.tabIndex)
      this.tabPosition = this.tabIndex
    },
  },

  methods: {
    tabChange(index) {
      this.$emit('getSelected', this.groupList[index])
    },
  },
}
</script>
<style scoped lang="less">
.operateList {
  padding: 0 24px;
}
</style>
